<template>
  <div ref="infrastructureDetailPrint" id="infrastructureDetailPrint" style="width: 690px">
    <div class="pageTitle">基建现场管理单</div>
    <table border="1" cellspacing="1" cellpadding="0">
      <tbody>
        <tr class="seasonTitle" style="text-align: left; font-weight: bold">
          <td colspan="6">基础信息</td>
        </tr>
        <tr>
          <td class="label" style="text-align: center">申请流水号</td>
          <td>{{ infrastructure.applyNo }}</td>
          <td class="label" style="text-align: center">申请人</td>
          <td>{{ infrastructure.applyUser }}</td>
          <td class="label" style="text-align: center">申请时间</td>
          <td>{{ formatDate(infrastructure.applyTime || '', 'yyyy-MM-dd') }}</td>
        </tr>
        <tr>
          <td class="label" style="text-align: center">合同编号</td>
          <td>{{ infrastructure.contractNumber }}</td>
          <td class="label" style="text-align: center">合同名称</td>
          <td colspan="3">{{ infrastructure.contractName }}</td>
        </tr>
        <tr>
          <td class="label" style="text-align: center">费用支出号</td>
          <td>{{ infrastructure.costNumber }}</td>
          <td class="label" style="text-align: center">签订公司/代码</td>
          <td colspan="3">
            {{ infrastructure.companyName ? infrastructure.companyName + '/' + infrastructure.companyCode : '' }}
          </td>
        </tr>
        <tr>
          <td class="label" style="text-align: center">采购订单号</td>
          <td>{{ infrastructure.poNo }}</td>
          <td class="label" style="text-align: center">供应商名称</td>
          <td colspan="3">
            {{ infrastructure.supplierName ? infrastructure.supplierName + '/' + infrastructure.supplierCode : '' }}
          </td>
        </tr>
        <tr>
          <td class="label" style="text-align: center">公文类型</td>
          <td>
            <span
              v-for="item in codes.InfrastructureDocType"
              v-show="item.code == infrastructure.docType"
              :key="item.code"
              :value="item.code"
            >
              {{ item.name }}
            </span>
          </td>
          <td class="label" style="text-align: center">单据类型</td>
          <td>
            <span
              v-for="item in codes.InfrastructureType"
              v-show="item.code == infrastructure.type"
              :key="item.code"
              :value="item.code"
            >
              {{ item.name }}
            </span>
          </td>
          <td class="label" style="text-align: center">单据编号</td>
          <td>{{ infrastructure.num }}</td>
        </tr>
        <tr>
          <td class="label" style="text-align: center">单据名称</td>
          <td colspan="5">{{ infrastructure.name }}</td>
        </tr>
        <tr>
          <td class="label" style="text-align: center">申报金额</td>
          <td>{{ infrastructure.amount }}</td>
          <td class="label" style="text-align: center">审批金额</td>
          <td>{{ infrastructure.auditAmount }}</td>
          <td colspan="2">
            <span
              v-for="(code, index) in codes['基建单据报价方式']"
              :key="index"
              :value="code.code"
              v-show="code.code == infrastructure.priceQuotation"
            >
              {{ code.name }}
            </span>
          </td>
        </tr>
        <tr class="seasonTitle" style="text-align: left; font-weight: bold" v-show="showStage1">
          <td colspan="6">第一阶段：</td>
        </tr>
        <tr v-show="showStage1">
          <td class="label" style="text-align: center">主要内容描述</td>
          <td colspan="5">{{ infrastructure.stageAdvice1 }}</td>
        </tr>
        <tr v-show="showStage1">
          <td class="label" style="text-align: center">处理要求或建议</td>
          <td colspan="5">{{ infrastructure.stageContent1 }}</td>
        </tr>
        <tr class="seasonTitle" style="text-align: left; font-weight: bold" v-show="showStage1">
          <td colspan="6">附件上传：</td>
        </tr>
        <tr v-show="showStage1">
          <td colspan="4" style="text-align: center">附件名称</td>
          <td style="text-align: center">上传人</td>
          <td style="text-align: center">上传时间</td>
        </tr>
        <tr v-for="attach in attachs[1]" :key="attach.id" v-show="showStage1">
          <td colspan="4">{{ attach.fileName }}</td>
          <td style="text-align: center">{{ attach.uploaderName }}</td>
          <td style="text-align: center">{{ formatDate(attach.uploadTime || '', 'yyyy-MM-dd') }}</td>
        </tr>
        <tr class="seasonTitle" style="text-align: left; font-weight: bold" v-show="showStage2">
          <td colspan="6" style="text-align: left; font-weight: bold">第二阶段：</td>
        </tr>
        <tr v-show="showStage2">
          <td class="label" style="text-align: center">主要内容描述</td>
          <td colspan="5">{{ infrastructure.stageAdvice2 }}</td>
        </tr>
        <tr v-show="showStage2">
          <td class="label" style="text-align: center">处理要求或建议</td>
          <td colspan="5">{{ infrastructure.stageContent2 }}</td>
        </tr>
        <tr class="seasonTitle" style="text-align: left; font-weight: bold" v-show="showStage2">
          <td colspan="6">附件上传：</td>
        </tr>
        <tr v-show="showStage2">
          <td colspan="4" style="text-align: center">附件名称</td>
          <td style="text-align: center">上传人</td>
          <td style="text-align: center">上传时间</td>
        </tr>
        <tr v-for="attach in attachs[2]" :key="attach.id" v-show="showStage2">
          <td colspan="4">{{ attach.fileName }}</td>
          <td style="text-align: center">{{ attach.uploaderName }}</td>
          <td style="text-align: center">{{ formatDate(attach.uploadTime || '', 'yyyy-MM-dd') }}</td>
        </tr>
        <tr class="seasonTitle" style="text-align: left; font-weight: bold" v-show="showStage3">
          <td colspan="6">第三阶段：</td>
        </tr>
        <tr v-show="showStage3">
          <td class="label" style="text-align: center">主要内容描述</td>
          <td colspan="5">{{ infrastructure.stageAdvice3 }}</td>
        </tr>
        <tr v-show="showStage3">
          <td class="label" style="text-align: center">处理要求或建议</td>
          <td colspan="5">{{ infrastructure.stageContent3 }}</td>
        </tr>
        <tr class="seasonTitle" style="text-align: left; font-weight: bold" v-show="showStage3">
          <td colspan="6">附件上传：</td>
        </tr>
        <tr v-show="showStage3">
          <td colspan="4" style="text-align: center">附件名称</td>
          <td style="text-align: center">上传人</td>
          <td style="text-align: center">上传时间</td>
        </tr>
        <tr v-for="attach in attachs[3]" :key="attach.id" v-show="showStage3">
          <td colspan="4">{{ attach.fileName }}</td>
          <td style="text-align: center">{{ attach.uploaderName }}</td>
          <td style="text-align: center">{{ formatDate(attach.uploadTime || '', 'yyyy-MM-dd') }}</td>
        </tr>
        <tr class="seasonTitle" style="text-align: left; font-weight: bold">
          <td colspan="6">审批记录：</td>
        </tr>
        <tr
          v-for="(item, index) in finalComments"
          :key="'comments_' + index"
          v-show="finalComments.length > 0 && ['申请人'].indexOf(item.taskDefKey) < 0"
        >
          <td class="label" style="text-align: center">{{ item.taskDefKey }}</td>
          <td colspan="5">
            <div style="padding: 5px 10px">
              <div style="min-height: 30px">
                {{ item.fullMessage }}
              </div>
              <div style="display: flex; justify-content: flex-end">
                <span style="padding: 2px 5px; width: 120px"> 签名：{{ item.userName }} </span>
                <span style="padding: 2px 5px; width: 130px">
                  日期：{{ formatDate(item.time || '', 'yyyy-MM-dd') }}
                </span>
                <span style="padding: 2px 5px; width: 70px">
                  {{ item.taskMessage }}
                </span>
              </div>
            </div>
          </td>
        </tr>
        <tr v-if="!finalComments || finalComments.length <= 0 || !hasTaskDefKey()">
          <td></td>
          <td colspan="5"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { formatDate } from '@/utils/util'
import printJS from 'print-js'
export default {
  props: {
    codes: {
      type: Object,
      default: () => {
        return {}
      },
    },
    infrastructure: {
      type: Object,
      default: () => {
        return {}
      },
    },
    attachs: {
      type: Array,
      default: () => {
        return []
      },
    },

    comments: {
      type: Array,
      default: () => {
        return []
      },
    },
    process: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  computed: {
    showStage1() {
      return (
        (this.process.status == 3 ||
          [...this.stageDefKeys1, ...this.stageDefKeys2, ...this.stageDefKeys3].indexOf(this.process.taskDefKey) >
            -1) &&
        this.finalComments &&
        this.hasComments(this.stageDefKeys1)
      )
    },
    showStage2() {
      return (
        (this.process.status == 3 ||
          [...this.stageDefKeys2, ...this.stageDefKeys3].indexOf(this.process.taskDefKey) > -1) &&
        this.finalComments &&
        this.hasComments(this.stageDefKeys2)
      )
    },
    showStage3() {
      return (
        (this.process.status == 3 || this.stageDefKeys3.indexOf(this.process.taskDefKey) > -1) &&
        this.finalComments &&
        this.hasComments(this.stageDefKeys3)
      )
    },
  },
  data() {
    return {
      finalComments: [],
      taskDefKeys: [],
      stageDefKeys1: ['major', 'proManager', 'majorHeader0', 'document0'],
      stageDefKeys2: ['document', 'major1', 'budget', 'budgetHeader', 'proManager1', 'majorHeader'],
      stageDefKeys3: [
        'document1',
        'major2',
        'budget1',
        'budgetHeader1',
        'projectManager2',
        'majorHeader1',
        'document2',
      ],
    }
  },
  methods: {
    formatDate,
    print() {
      printJS({
        printable: 'infrastructureDetailPrint',
        type: 'html',
        targetStyles: ['*'],
        scanStyles: false,
        maxWidth: '690px',
        style:
          '@media print {@page {size:  21cm 29.7cm;}#printContainer {text-align: center;color: black;}#printContainer table {background-color: black;}#printContainer table td {background-color: white;}#printContainer .label {font-size: 14px;text-align: center;font-weight: bold;}.pageTitle {font-size: 21px;font-weight: bold;text-align: center;}table {width: 690px;border-collapse: collapse;}table tr    { page-break-inside:avoid; page-break-after:auto }table tr td {font-size: 14px;height: 30px;  min-width: 110px;word-break: break-all;padding: 5px 5px;text-align: left; border: 1px solid #000;}',
      })
    },
    checkComments() {
      if (this.comments) {
        if (this.comments.length > 2 && this.comments[0].time > this.comments[1].time) {
          this.$set(this, 'finalComments', [...this.comments].reverse())
        } else {
          this.$set(this, 'finalComments', [...this.comments])
        }
      } else {
        this.$set(this, 'finalComments', [])
      }
      this.$forceUpdate()
    },
    hasTaskDefKey() {
      for (let comment of this.comments) {
        if (['applyUser'].indexOf(comment.defId) < 0) {
          return true
        }
      }
      return false
    },
    checkProcess() {
      if (!this.process) {
        this.process = {}
      }
    },
    hasComments(stageDefKeys) {
      if (this.comments) {
        for (let comment of this.comments) {
          if (stageDefKeys.indexOf(comment.defId) > -1) {
            return true
          }
        }
      }
      return false
    },
  },
  watch: {
    comments: {
      handler(newV, oldV) {
        this.checkComments()
      },
    },
    process: {
      handler(newV, oldV) {
        this.checkProcess()
      },
    },
  },
}
</script>
<style scoped>
#printContainer {
  text-align: center;
  color: black;
}

#printContainer table {
  background-color: black;
}

#printContainer table td {
  background-color: white;
}

#printContainer .label {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

.pageTitle {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

table {
  width: 690px;
}

table tr td {
  font-size: 14px;
  height: 30px;
  min-width: 110px;
  padding: 5px 5px;
  text-align: left;
  word-break: break-all;
  border: 1px solid #000;
}
</style>
